<template>
    <view class="follow">
        <uni-nav-bar fixed left-icon="left" title="跟进记录" @clickLeft="backHandle" class="unibarS">
        </uni-nav-bar>
        <u-sticky offset-top="0">
			<dropdown-screen
				ref="dropdownScreen"
				:barFontSize="32"
				:barTextColor="'rgba(12, 16, 25, 1)'"
				:activeColor="'rgba(77, 172, 177, 1)'"
				@tabClick="tabClick"
				@confirm="confirm"
				@reset="reset"
				:listArr="listArr">
				<template v-slot:content>
					<view class="searchContent" v-show="searchType == 0">
						<u--form labelPosition="top" ref="uForm" labelWidth="70">
							<u-form-item label="排序方式" ref="item1">
								<radio-group @change="radioChange($event, 'sortKeyValues')" class="radio-group-box">
									<label>
										<radio value="desc" :checked="tempSearchObj.sortKeyValues === 'desc'" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>正序排序</text>
									</label>
									<label>
										<radio value="asc" :checked="tempSearchObj.sortKeyValues === 'asc'" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>倒序排序</text>
									</label>
								</radio-group>
							</u-form-item>
							<u-form-item label="排序属性" ref="item1">
								<radio-group @change="radioChange($event, 'sortKey')" class="radio-group-box">
									<label v-for="(item, index) in sortPropsList" :key="index">
										<radio :value="item.value" :checked="tempSearchObj.sortKey === item.value" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>{{ item.name }}</text>
									</label>
								</radio-group>
							</u-form-item>
						</u--form>
					</view>
					<view class="searchContent" v-show="searchType == 1">
						<u--form labelPosition="top" ref="uForm" labelWidth="100">
							<u-form-item label="跟进类型" ref="item1">
								<radio-group @change="radioChange($event, 'followupType')" class="radio-group-box">
									<label v-for="(item, index) in bus_followup" :key="index">
										<radio :value="item.dictValue" :checked="tempSearchObj.followupType === item.dictValue" iconColor="#FFFFFF" activeBackgroundColor="#4DACB1" />
										<text>{{ item.dictLabel }}</text>
									</label>
								</radio-group>
							</u-form-item>
							<u-form-item class="search-item-box" label="时间范围"  @click="openCalendar()" border ref="item1">
								<view>
									<view v-if="tempSearchObj.startTime && tempSearchObj.endTime">{{ tempSearchObj.startTime + ' - ' + tempSearchObj.endTime }}</view>
									<view v-else>选择时间范围</view>
								</view>
								<u-icon slot="right" name="clock"></u-icon>
							</u-form-item>
						</u--form>
					</view>
				</template>
			</dropdown-screen>
		</u-sticky>
        <uni-search-bar class="uni-mt-10" v-model="params.keywords" bgColor="#FFFFFF" radius="5" placeholder="搜索" clearButton="auto"
            cancelButton="none" @confirm="searchHandle()" @clear="searchHandle()" />
        <view v-if="list.length" class="list">
            <view class="trends" v-for="item in list" :key="item.id" @click="goDetails(item)">
                <view class="trends-state">
                    <view>{{ item.followupTime }}</view>
                    <view>{{bus_followup_type[item.followupType]}}</view>
                </view>
                <view class="trends-name">
                    <view class="trends-avatar">
                        <u-avatar class="avatar" size="40" :src="item.avatar"></u-avatar>
                        <text>{{ item.staffName }}</text>
                    </view>
                    <view class="trends-customer" @click.stop="getCustomer(item)">来自客户：{{ item.customerName }}</view>
                </view>
                <view class="trends-describe">{{ convert(item.dynamicData) }}</view>
                <view class="trends-time">
                    <view style="margin-right: 150rpx;">
                        <u-icon name="clock" color="#677585" size="20"></u-icon>
                        <text>{{ item.createTime }}</text>
                    </view>
                    <view>
                        <u-icon name="chat" color="#677585" size="20"></u-icon>
                        <text>{{ item.commentNumber }}</text>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else></empty-view>

        <!-- 选择跟进日期 -->
        <uni-calendar ref="calendar" class="uni-calendar--hook" :range="true" :clear-date="true" :date="info.date"
            :insert="info.insert" @confirm="confirmCalendar" @close="closeCalendar" />

    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            // 跟进类型
            bus_followup: [],
            bus_reminder_method: null,
			params: {
				keywords: '',
				pageNum: 1,
				pageSize: 20,

				sortKey: 'create_time',
				sortKeyValues: 'desc',
                followupType: null,
                startTime: null,
                endTime: null,
			},
			total: 0,
			status: 'loading',
			refresh: false,
			list: [],
                        // 排序0  筛选1
			searchType: 0,
            tempSearchObj: {
				sortKey: 'create_time',
				sortKeyValues: 'desc',
                followupType: null,
                startTime: null,
                endTime: null,
			},
            showCalendar: true, // 显示日历
            info: {
                insert: false,
                selected: []
            },
            listArr: [
				{
					label: '排序',
					iconPath: '/static/svg/icon-paixu.svg'
				},
				{
					label: '筛选',
					iconPath: '/static/svg/icon-shaixuan.svg'
				}
			],
            sortPropsList: [
				{ name: '创建时间', value: 'create_time' }
			],
        }
    },
    onLoad() {
        // 跟进类型
        this.bus_followup = JSON.parse(uni.getStorageSync('bus_followup_type'))
        this.bus_followup_type = convertToDict(this.bus_followup)
		this.getData()
	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        getData() {
			this.$http.get('/app/followup_record/recordList', this.params).then(res => {
				if (res.code == 200) {
					this.list = [...this.list, ...res.rows]
					this.total = res.total
					if (this.total > this.list.length) {
						console.log('有更多数据')
						this.status = 'more'
					} else {
						console.log('没更多数据')
						this.status = 'noMore'
					}
					if (this.refresh) {
						uni.stopPullDownRefresh()
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
		searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
        convert(value) {
            if(!value) return ''
            let list = JSON.parse(value)
            return list.filter(item => item.content).map(item => item.content).join(';')
        },
        getCustomer(item) {
            uni.navigateTo({
				url: '/pages/crm/customer/customerDetails?id=' + item.customerId
			})
        },
        goDetails(item) {
            uni.navigateTo({
                url: '/pages/follow/followDetails?id=' + item.id
            });
        },
        radioChange(e, props) {
			this.tempSearchObj[props] = e.detail.value
		},
		// 点击了 切换了 搜索标签
		tabClick(item) {
            Object.keys(this.params).forEach(key => {
				if (this.tempSearchObj.hasOwnProperty(key)) {
					this.tempSearchObj[key] = this.params[key];
				}
			});

			this.searchType = item.index
		},
		reset() {
			this.tempSearchObj = {
				sortKey: 'create_time',
				sortKeyValues: 'desc',
                followupType: null,
                startTime: null,
                endTime: null,
			}
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
			});
			this.searchHandle()
		},
		confirm() {
			Object.keys(this.tempSearchObj).forEach(key => {
				if (this.params.hasOwnProperty(key)) {
					this.params[key] = this.tempSearchObj[key];
				}
			});
			this.searchHandle()
		},
        		// 打开日历
		openCalendar(type) {
            this.$refs.calendar.open()
        },
        // 确定日期
        confirmCalendar(e) {
			console.log(e)
			if(e.range.before && e.range.after) {
				let arr = []
				arr[0] = e.range.before? e.range.before + ' 00:00:00' : null
				arr[1] = e.range.after? e.range.after + ' 23:59:59' : null
				this.tempSearchObj.startTime = arr[0]
				this.tempSearchObj.endTime = arr[1]
				// console.log(this.tempSearchObj.updateTimes)
			} else {
				this.tempSearchObj.updateTimes = null
				uni.$u.toast('请选择时间范围')
				return
			}
        },
        // 关闭日历
        closeCalendar() { },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>
/deep/.u-sticky {
	z-index: 10 !important;
}
.trends {
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 32rpx;
    padding: 32rpx;

    .trends-state {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 28rpx;
        font-weight: 500;
        margin-bottom: 28rpx;

        >view:nth-child(1) {
            color: rgba(103, 117, 133, 1);
        }

        >view:nth-child(2) {
            color: rgba(12, 16, 25, 1);
        }
    }

    .trends-name {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 28rpx;
        .trends-avatar {
            flex: 1;
            display: flex;
            align-items: center;
            text {
                margin-left: 16rpx;
                font-size: 30rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
            }

        }
        .trends-customer {
            margin-left: 20rpx;
            max-width: 300rpx;
            text-align: right;
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
            // 超出隐藏
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .trends-describe {
        font-size: 32rpx;
        font-weight: 500;
        color: rgba(12, 16, 25, 1);
        margin-bottom: 10rpx;
    }

    .trends-time {
        display: flex;

        >view {
            display: flex;
            align-items: center;
        }

        text {
            font-size: 28rpx;
            font-weight: 400;
            color: rgba(103, 117, 133, 1);
            margin-left: 8rpx;
        }
    }
}
</style>